<script setup>
import { ref, watchPostEffect, onUnmounted } from "vue"
import { useRouter } from "vue-router"
import { usejianliStore } from "@/store/jianli/jianli"
import { useIndexStore } from "@/store/index"

onUnmounted(() => {
	document.body.removeEventListener("click", v_menu_click)
})

watchPostEffect(() => {
	let title = document.querySelector("#title")
	if (title) {
		title.remove()
	}
	title = document.createElement("div")
	title.id = "title"
	title.style.animation = "jackInTheBox 2s forwards"
	title.style.width = "200px"
	title.style.height = "10%"
	title.style.fontSize = "40px"
	title.style.display = "flex"
	title.style.justifyContent = "center"
	title.style.alignItems = "center"
	title.innerHTML =
		jianliStore.jianli_menu_list[jianliStore.select_menu_num].label
	jianli.value.insertBefore(title, jianli.value.firstChild)
})

// body点击函数
const v_menu_click = () => {
	active.value = true
	menu_isclick.value = false
	menu_tip.value.style.width = "0px"
	tip_box.value.style.width = "200px"
	tip_box.value.style.height = "25px"
}

/**
 *
 * @param {Element} el
 */
const vMenu = (el) => {
	document.body.addEventListener("click", v_menu_click)
	el.onmouseover = (e) => {
		menu_tip.value.style.width = "120px"
		menu_tip.value.style.transform = "translateX(-80px)"
		tip_box.value.style.width = "0px"
		tip_box.value.style.height = "0px"
		active.value = false
	}
	el.onmouseout = (e) => {
		if (menu_isclick.value) return
		active.value = true
		menu_tip.value.style.width = "0px"
		tip_box.value.style.width = "200px"
		tip_box.value.style.height = "25px"
	}
	tip_box.onmouseover = (e) => {
		e.preventDefault()
		e.stopPropagation()
		active.value = true
	}

	tip_box.onmouseout = (e) => {
		e.preventDefault()
		e.stopPropagation()
		active.value = false
	}
}

const router = useRouter()
const jianliStore = usejianliStore()
const indexStore = useIndexStore()
const active = ref(true)
const menu_isclick = ref(false)
const menu_tip = ref(null)
const tip_box = ref(null)
const jianli = ref(null)

const openMenu = (e) => {
	e.preventDefault()
	e.stopPropagation()
	menu_isclick.value = true
}

const handle = (item, e) => {
	e.preventDefault()
	e.stopPropagation()
	router.push({ name: item.to_name })
	jianliStore.setSelectMenuNum(item.id)
	indexStore.setHeader_nav_list(item.to_name)
}
</script>
<template>
	<div class="jianli" ref="jianli">
		<div id="title">
			{{
				jianliStore.jianli_menu_list[jianliStore.select_menu_num].label
			}}
		</div>
		<router-view></router-view>
		<div class="menu" v-menu @click="openMenu($event)">
			<icon-svg name="展开菜单" v-if="active" class="hvr-pulse-grow" />
			<icon-svg name="收起菜单" v-else class="hvr-pulse-grow" />
			<ul class="menu-tip" ref="menu_tip">
				<!-- 在store中创建菜单并循环 -->
				<li
					@click="handle(item, $event)"
					:key="item.id"
					v-for="item in jianliStore.jianli_menu_list"
					:class="
						item.id == jianliStore.select_menu_num ? 'active' : ''
					">
					{{ item.label }}
				</li>
			</ul>
			<div class="tip-box" ref="tip_box">
				<div class="tip">点击这里查看更多喔~</div>
				<icon-svg name="向右" class="tip-icon" />
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
.jianli {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	overflow: hidden;
	.menu {
		$size: 40px;
		width: $size;
		height: $size;
		display: inline-block;
		font-size: $size;
		position: relative;
		right: calc(-50% + $size / 2);
		top: calc(-100% + $size);
		transition: all $animation-duration-05;
		ul {
			font-size: 20px;
			width: 0px;
			overflow: hidden;
			background-color: $menu-bg-color;
			transition: all $animation-duration-05;
			transform-origin: right;
			li {
				text-align: center;
				line-height: $size;
				height: $size;
				cursor: pointer;
				&:hover {
					background-color: $menu-bg-active-color;
					animation: heartBeat $animation-duration-1
						$animation-ease-linear !important;
				}
			}
			&:hover .active {
				animation: none;
			}
			.active {
				background-color: $menu-bg-active-color;
				animation: heartBeat $animation-duration-1
					$animation-ease-linear;
			}
		}
		.tip-box {
			$n: 4;
			$tip_size: 200px;
			$height: 25px;
			width: $tip_size;
			position: relative;
			top: calc($n * $size * -1 - $height - ($size / 2 - $height / 2));
			right: $tip_size;
			font-size: 16px;
			color: $all-color;
			display: flex;
			justify-content: space-around;
			align-items: center;
			transition: all $animation-duration-05;
			overflow: hidden;
			cursor: default;
			.tip-icon {
				font-size: 25px !important;
				animation: shakeX $animation-duration-5 $animation-ease-linear;
			}
		}
	}
}
</style>
